<template>
  <!-- 时间轴 -->
  <!-- <div class="dateSlider" id="dateSlider" style="width: 970px; height: 40px">
    &nbsp;
  </div> -->
  <MyMap></MyMap>
  <!-- 1.左侧展开组件 -->
  <!-- 1.1空间查询组件 -->
  <div class="SpatialQuery">
    <SpatialQuery />
  </div>
  <!-- 1.2排查--使用封装组件-->
  <!-- 1.3探测 -->
  <div class="SpatialQuery">
    <CubeView />
  </div>
  <!-- 1.4检测 -->
  <div class="SpatialQuery">
    <ExamView />
  </div>
  <!-- 1.5修复 -->
  <div class="SpatialQuery">
    <RepairView />
  </div>
  <!-- 分割线 -->
  <div>
    <!-- 左上搜索框 -->
    <div class="left_seach">
      <Seach></Seach>
    </div>
    <!-- 整个页面表头 -->
    <div class="top_title">
      <div class="top_text">{{ title }}</div>
    </div>
    <!-- 右侧主体内容 -->
    <div class="right_main">
      <div class="main_box">
        <!-- 数据面板 -->
        <div
          class="big_data"
          :class="falge_big_data ? 'big_data_' : 'big_data_active'"
          @click="changeShow"
        ></div>
        <!-- 功能菜单 -->
        <div
          class="func_menu"
          :class="falge_func_menu ? 'func_menu_' : 'func_menu_active'"
          @click="changeShow"
        ></div>
        <!-- 专题图 -->
        <div
          class="ztt"
          :class="falge_ztt ? 'ztt_' : 'ztt_active'"
          @click="changeShow"
        ></div>
      </div>
      <Transition>
        <BigData v-if="!falge_big_data"></BigData>
      </Transition>
      <Transition>
        <FuncMenu v-if="!falge_func_menu"></FuncMenu>
      </Transition>
      <Transition>
        <ZTT v-if="!falge_ztt"></ZTT>
      </Transition>
    </div>
    <div v-show="show_LeftBtn">
      <!-- 左下功能组 -->
      <LeftBtn></LeftBtn>
    </div>
    <div>
      <!-- 右下退出按钮 -->
      <Back @click="handleBack" />
    </div>
  </div>
</template>
<script setup>
import { getDataDemo } from '@/api/index'
import { onMounted, ref, toRaw } from 'vue'
import emitter from '@/utils/bus'
import MyMap from '@/views/map/map.vue'
import LeftBtn from '@/components/LeftBtn.vue'
import Back from '@/components/Back.vue'
import Seach from '@/components/Seach.vue'
import { useRouter } from 'vue-router'
import FuncMenu from '@/components/FuncMenu/index.vue'
import ZTT from '@/components/ZTT/index.vue'
import BigData from '@/components/BigData/index.vue'
// 引入左侧展示组件
import SpatialQuery from '@/components/FuncMenu/SpatialQuery.vue'
import CubeView from '@/components/ZTT/CubeView.vue'
import ExamView from '@/components/ZTT/ExamView.vue'
import RepairView from '@/components/ZTT/RepairView.vue'
import $ from 'jquery'
import 'jquery-ui-dist/jquery-ui'
import 'jquery-ui-dist/jquery-ui.min.css'
import '@/assets/DateSlider/js/DateSlider.js' //插件
import '@/assets/DateSlider/css/dateSlider.css'
import {
  userMap,
  switchList6,
  switchList7,
  switchList8,
  switchList9,
  switchList10,
  switchList11,
} from '@/store/index'
let storeRepair = switchList6()
let storeDetect = switchList7()
let storeCube = switchList8()
let storeDia = switchList9()
let storeBigData = switchList10()
let storePC = switchList11()
// 时间轴
var Months = [
  '1月',
  '2月',
  '3月',
  '4月',
  '5月',
  '6月',
  '7月',
  '8月',
  '9月',
  '10月',
  '11月',
  '12月',
]
let map = userMap() //接收
let list
onMounted(() => {
  list = toRaw(map.map)
})
const createDemos = () => {
  var date = $("<div id='date' />").appendTo($('#dateSlider')) //渲染日期组件
  var dateSilderObj = date.dateRangeSlider({
    arrows: false, //是否显示左右箭头
    bounds: {
      min: new Date(2013, 7, 1),
      max: new Date(2014, 6, 31, 12, 59, 59),
    }, //最大 最少日期
    defaultValues: {
      min: new Date(2014, 1, 23),
      max: new Date(2014, 4, 23),
    }, //默认选中区域
    scales: [
      {
        first: function (value) {
          return value
        },
        end: function (value) {
          return value
        },
        next: function (val) {
          var next = new Date(val)
          return new Date(next.setMonth(next.getMonth() + 1))
        },
        label: function (val) {
          return Months[val.getMonth()]
        },
        format: function (tickContainer, tickStart, tickEnd) {
          tickContainer.addClass('myCustomClass')
        },
      },
    ],
  }) //日期控件

  //重新赋值（整个时间轴）
  dateSilderObj.dateRangeSlider(
    'bounds',
    new Date(2013, 8, 1),
    new Date(2014, 7, 31, 12, 59, 59)
  )

  //重新赋值（选中区域）
  dateSilderObj.dateRangeSlider(
    'values',
    new Date(2014, 2, 23),
    new Date(2014, 5, 23)
  )

  //拖动完毕后的事件
  dateSilderObj.bind('valuesChanged', function (e, data) {
    var val = data.values
    var stime =
      val.min.getFullYear() +
      '-' +
      (val.min.getMonth() + 1) +
      '-' +
      val.min.getDate()
    var etime =
      val.max.getFullYear() +
      '-' +
      (val.max.getMonth() + 1) +
      '-' +
      val.max.getDate()
    console.log('起止时间：' + stime + ' 至 ' + etime)
  })
}
// 分割线
let falge_ztt = ref(true)
let falge_func_menu = ref(true)
let falge_big_data = ref(false)
const title = import.meta.env.VITE_APP_TITLE
const show_LeftBtn = ref(false)
const changeShow = (e) => {
  let arr = list.getLayers().getArray()
  if (e.target.className.indexOf('big_data') > -1) {
    if (!falge_big_data.value) {
      falge_big_data.value = true
      show_LeftBtn.value = true
    } else {
      storeRepair.queryBtn = false
      storeCube.queryBtn = false
      storeDetect.queryBtn = false
      storePC.queryBtn = false
      show_LeftBtn.value = false
      falge_big_data.value = false
      falge_ztt.value = true
      falge_func_menu.value = true
      for (let i = 0; i < arr.length; i++) {
        if (
          arr[i].values_.title == 'HJLayer' ||
          arr[i].values_.title == 'areaLayer' ||
          arr[i].values_.title == 'TroublePointLayer' ||
          arr[i].values_.title == 'WaterPointLayer'
        ) {
          arr[i].getSource().clear()
        }
      }
    }
  }
  if (e.target.className.indexOf('func_menu') > -1) {
    if (!falge_func_menu.value) {
      falge_func_menu.value = true
      show_LeftBtn.value = true
    } else {
      show_LeftBtn.value = true
      falge_big_data.value = true
      falge_ztt.value = true
      falge_func_menu.value = false
      storeRepair.queryBtn = false
      storeCube.queryBtn = false
      storeDetect.queryBtn = false
      storePC.queryBtn = false
      for (let i = 0; i < arr.length; i++) {
        if (
          arr[i].values_.title == 'HJLayer' ||
          arr[i].values_.title == 'areaLayer' ||
          arr[i].values_.title == 'TroublePointLayer' ||
          arr[i].values_.title == 'WaterPointLayer'
        ) {
          arr[i].getSource().clear()
        }
      }
    }
  }
  if (e.target.className.indexOf('ztt') > -1) {
    if (!falge_ztt.value) {
      falge_ztt.value = true
      show_LeftBtn.value = true
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].values_.title == 'HJLayer') {
          arr[i].getSource().clear()
        }
      }
    } else {
      show_LeftBtn.value = true
      falge_big_data.value = true
      falge_ztt.value = false
      falge_func_menu.value = true
    }
  }
}

const router = useRouter()
const handleBack = () => {
  router.push('/login')
}
</script>
<style lang="less" scoped>
/* 三大功能外框样式 */
#func_boxa {
  top: 0.5%;
  right: 27%;
  position: absolute;
  padding-left: 5px;
  width: 150px;
  height: 76px;
  z-index: 999;
  background: url('@/assets/images/k.png') 0px 0px / 100% 100% no-repeat;
  background-color: #0a163cc9;
  color: #80eeff;
}
#func_boxa .func_lista {
  z-index: 9999;
  background-color: #0a163cc9;
  border: 2px solid #80eeff;
  color: #80eeff;
  overflow-y: auto;
  // overflow-x: hidden;
  overflow: hidden;
  height: 100%;
}
// 空间查询样式
.SpatialQuery {
  position: absolute;
  top: 50px;
  left: 8px;
  background: #ffffff;
}
// 分割线
.left_seach {
  top: 10px;
  left: 8px;
  border-radius: 2px;
  width: 425px;
  position: absolute;
  z-index: 9999;
}

.top_title {
  z-index: 3;
  font-size: 16px;
  position: absolute;
  top: 0px;
  // z-index: 999;
  color: #fff;
  left: 50%;
  height: 50px;
  width: 1150px;
  line-height: 20px;
  transform: translate(-50%);
  background: url('@/assets/images/title.png') 0px 0px / 100% 100% no-repeat;
  .top_text {
    font-size: 26px;
    font-weight: bold;
    top: 10px;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
  }
}
.main_box {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 30%;
  height: 50px;
  z-index: 9999;
  // background: #999;
  .ztt {
    cursor: pointer;
    position: absolute;
    width: 130px;
    right: 0px;
    height: 38px;
  }
  .func_menu {
    cursor: pointer;
    position: absolute;
    width: 130px;
    right: 140px;
    height: 38px;
  }
  .big_data {
    cursor: pointer;
    position: absolute;
    width: 130px;
    right: 280px;
    height: 38px;
  }
  .ztt_ {
    background: url('@/assets/images/ztt.png') 0px 0px / 100% 100% no-repeat;
  }
  .func_menu_ {
    background: url('@/assets/images/gncd.png') 0px 0px / 100% 100% no-repeat;
  }
  .big_data_ {
    background: url('@/assets/images/DSJ.png') 0px 0px / 100% 100% no-repeat;
  }
  .ztt_active {
    background: url('@/assets/images/ztt_.png') 0px 0px / 100% 100% no-repeat;
  }
  .func_menu_active {
    background: url('@/assets/images/gncd_.png') 0px 0px / 100% 100% no-repeat;
  }
  .big_data_active {
    background: url('@/assets/images/dsj_.png') 0px 0px / 100% 100% no-repeat;
  }
}

.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>
